<template>
	<view>
		<view class="listhead">
			<view class="listleft">
				<view style="background-color: #f7f7f7;display: flex;border-radius: 30px;padding: 2px;margin-top: 10px;">
					
					<view @click="headisavatice=0" :class="headisavatice==0?'litem isavtice':'litem'">用户列表</view>
					
					<view @click="headisavatice=1" :class="headisavatice==1?'litem isavtice':'litem'">名人库</view>
					
				</view>
			</view>
			<view class="listright" style="width: 50px;">
				<text class="myicon">&#xe6bb;</text>
			</view>
		</view>
		<view class="search">
			<u-search :showAction="true" actionText="筛选" :animation="true"></u-search>
		</view>
		<view class="list">
			<u-swipe-action>
				<u-swipe-action-item :options="listoptions" v-for="(item,index) in list" :key="index">
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<view class="item">
								<view class="iteml">
									<view> <text class="name">{{item.name}}</text><text
											class="sex">{{item.sex=='male'?'男':'女'}}</text></view>
									<view><text class="birthday">阳历 {{item.birthday}}</text></view>
								</view>
								<view class="itemr">
									<view class="itembaqzi">
										<text>{{formatbirthday(item.birthday)}}</text>
										<text>{{formatbirthday(item.birthday)}}</text>
									</view>
									<view class="avatarurl">
										<text class="itemimg">&#xe662;<!-- {{formatshengxiao(item.birthday).icon}} --></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listoptions: [{
						text: '合盘',
						style: {
							backgroundColor: "#b2955d"
						},
					},
					{
						text: '编辑',
						style: {
							backgroundColor: "#0e0141"
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: "#fd0d4d"
						},
					}
				],
				headisavatice: 0,
				list: [{
						'id': 1,
						'name': '刘恒强',
						'sex': 'male',
						'birthday': '1984-05-05 00:00'
					},
					{
						'id': 2,
						'name': '刘恒强',
						'sex': 'male',
						'birthday': '1984-05-05 00:00'
					},
					{
						'id': 3,
						'name': '刘恒强',
						'sex': 'male',
						'birthday': '1984-05-05 00:00'
					},
					{
						'id': 4,
						'name': '刘恒强',
						'sex': 'male',
						'birthday': '1984-05-05 00:00'
					},
					{
						'id': 5,
						'name': '刘恒强',
						'sex': 'male',
						'birthday': '1984-05-05 00:00'
					}
				]
			}
		},
		methods: {
			/**
			 * 根据生日转成生辰八字
			 */
			formatbirthday(date) {
				return '已辛辛庚'
			},
			//根据生日转成生肖的图标和名称
			formatshengxiao(date) {
				console.log(date)
				const newv = {
					name: '鼠',
					icon: '&#xe662;'
				}
				return newv
			}
		}
	}
</script>

<style lang="scss">
	.itembaqzi{
		font-size: 13px;
		color: #9f9f9f;
		display: flex;
		flex-direction: column;
		margin-right: 6px;
	}
	.itemimg {
		font-family: myfont;
		color: rgb(178, 149, 93);
		font-size: 36px;
	}

	.itemr {
		display: flex;
		align-items: center;
	}

	.avatarurl {
		background-color: #26253d;
		border-radius: 50px;
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: #b2955d solid 1px;
		margin-right: 3px;
		
	}

	.birthday {
		color: #9f9f9f;
		font-size: 14px;
	}

	.item {
		display: flex;
		align-items: center;
	}

	.iteml {
		flex: 1;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
	}

	.sex {
		font-size: 12px;
		padding-left: 6px;
		color: #9f9f9f;
	}

	.list {
		padding: 2px 10px;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 20rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.search {
		padding: 10px 15px;
	}

	page {
		//	background-color: #f8f8f8;
	}

	.listhead {
		display: flex;
		align-items: center;
		padding-top: 40px;
	}

	.listleft {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		//	background-color: #f7f7f7;
	}

	.litem {
		border-radius: 30px;
		padding: 6px 20px;
		font-size: 15px;
		font-weight: 500;
		transition-property: background-color;
		transition-duration: .25s, 1s;
	}

	.isavtice {
		background-color: white;
	}

	.myicon {
		font-size: 28px;
		font-family: myfont;

	}
</style>